<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=0.9" name="viewport">
  <meta content="DoubleAm的博客,贺雄彪的博客,贺雄彪,鲸落oh,江湖小栈" name="description">
  <meta Content="DoubleAm的博客,贺雄彪的博客,贺雄彪,鲸落oh,江湖小栈" name="keywords">
  <meta content="DoubleAm" name="author">
  <link href="/images/favicon.png" rel="shortcut icon">
  <title>五子棋</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .gobang {
      margin: 10px auto;
      width: 642px;
      height: 642px;
      /*border:1px solid;*/
      background: url(picture/bak.jpg);
      overflow: hidden;
    }

    .text {
      margin: 0 auto;
      width: 100px;
      height: 40px;
      text-align: center;
      color: #f00;
      border: 1px solid red;
      line-height: 40px;
      display: block;
    }

    #can {
      margin: 0px auto;
      border: 1px solid green;
      display: block;
    }
  </style>
</head>
<body>
<a href="/" style="position: fixed;top:0;left:0;z-index: 9999;">回到首页</a>
<canvas class="text">PK</canvas>
<div class="gobang">

  <canvas id="can" width="640" height="640">
    您的浏览器不支持canvas
  </canvas>
</div>
<script>
  var text = document.getElementsByClassName('text');


  //定义二维数组作为棋盘
  var maps = new Array(16);
  var len = maps.length;
  // alert(len)
  for (var i = 0; i < len; i++) {
    maps[i] = new Array();
    for (var j = 0; j < len; j++) {
      maps[i][j] = 0;
      // console.log(maps[i][j]);
    }
  }

  //初始化棋子
  var black = new Image();
  var white = new Image();
  var clientWidth = document.documentElement.clientWidth;
  black.src = "picture/black.png";
  white.src = "picture/white.png";
  //棋盘初始化
  var can = document.getElementById('can');
  var ctx = can.getContext("2d");  //获取该canvas的2D绘图环境对象
  ctx.strokeStyle = "#333";
  for (var m = 0; m < len - 1; m++) {
    for (var n = 0; n < len - 1; n++) {
      ctx.strokeRect(m * 40 + 20, n * 40 + 20, 40, 40);  //绘制40的小正方形
    }
  }
  //绘制文字
  var can1 = document.getElementsByClassName('text');
  var ctx1 = can1[0].getContext("2d");

  ctx1.beginPath();
  ctx1.font = ("100px Georgia");
  ctx1.fillStyle = "#F70707";
  // ctx1.fillText("Hello",40,100);

  var isBlack = true;
  //下子
  can.onclick = function play(e) {
    // alert(e.clientX);
    //获取棋盘偏移量
    var l = this.offsetLeft + 20;
    var t = this.offsetTop + 20;
    //获取点击相对棋盘坐标
    var x = e.clientX - l;
    var y = e.clientY - t;
    // alert(x);
    var row, col, index = 0;

    if (x % 40 < 20) {
      col = parseInt(x / 40);
    } else {
      col = parseInt(x / 40) + 1;
    }
    row = y % 40 < 20 ? parseInt(y / 40) : parseInt(y / 40) + 1;
    // alert(row+"行"+col+"行");  //第几列行第几列

    if (maps[row][col] === 0) {
      if (isBlack) {
        ctx.drawImage(black, col * 40, row * 40);   //下黑子
        isBlack = false;
        maps[row][col] = 2; //黑子为2
        iswin(2, row, col);
      } else {
        ctx.drawImage(white, col * 40, row * 40);
        isBlack = true;
        maps[row][col] = 1; //白子为1
        iswin(1, row, col);
      }
    }

    function iswin(t, row, col) {
      var orgrow, orgcol, total;
      reset();
      // alert(total);

      //判断每行是否有五个
      while (col > 0 && maps[row][col - 1] == t) {  //当前子左边还有
        total++;
        col--;

      }
      ;
      row = orgrow;
      col = orgcol;
      while (col + 1 < 16 && maps[row][col + 1] == t) {  //当前子右边还有
        col++;
        total++;
      }
      ;
      // alert(total);
      celebrate();

      //判断每列是否有五个
      reset();

      while (row > 0 && maps[row - 1][col] == t) {   //当前子上面还有
        total++;
        row--;
      }
      row = orgrow;
      col = orgcol;
      while (row + 1 < 16 && maps[row + 1][col] == t) {  //下面
        total++;
        row++;
      }
      celebrate();

      //左上 右下有没有五个
      reset();
      while (row > 0 && col > 0 && maps[row - 1][col - 1] == t) { //左上1
        row--;
        col--;
        total++;
      }
      row = orgrow;
      col = orgcol;
      while (row + 1 < 16 && col + 1 < 16 && maps[row + 1][col + 1] == t) {  //右下1
        row++;
        col++;
        total++;
      }
      // alert(total)
      celebrate();

      //左下 右上有没有五个
      reset();
      // alert(total);
      while (row > 0 && col + 1 < 16 && maps[row - 1][col + 1] == t) {  //右上
        row--;
        col++;
        total++;
      }
      row = orgrow;
      col = orgcol;
      while (row + 1 < 16 && col > 0 && maps[row + 1][col - 1] == t) {   //左下
        row++;
        col--;
        total++;
      }
      // alert(total);
      celebrate();

      function celebrate() {       //显示哪边赢
        if (total >= 5) {
          if (t == 1) {
            // alert("白子赢");
            // text[0].innerHTML="白子赢";
            // cxt1.clearRect(0,0,can1.width,can1.height);
            ctx1.clearRect(0, 0, can1[0].width, can1[0].height);
            ctx1.fillText("白子赢", 0, 100);
          } else {
            // alert("黑子赢");
            // text[0].innerHTML="黑子赢";
            // cxt1.clearRect(0,0,can1.width,can1.height);
            ctx1.clearRect(0, 0, can1[0].width, can1[0].height);
            ctx1.fillText("黑子赢", 0, 100);
          }
        }
      }

      function reset() {
        orgrow = row;
        orgcol = col;
        total = 1;
      }
    }

  }
</script>

</div>
</body>
</html>